<template>
  <div>
      <!-- <el-carousel :loop="false" :autoplay="false" height="204px">
        <el-carousel-item class="el-car-item" v-for="(list, index) in relevantList" :key="index">
          <li v-for="(imgList,index2) in list" :key="index2">
          <img class="top-img" :src="imgList.picture" :alt="imgList.title" />
          <p>{{imgList.name}}</p>
          </li>
        </el-carousel-item> -->
          <el-carousel trigger="click" height="150px">
            <el-carousel-item class="el-car-item" v-for="(list, index) in relevantList" :key="index">
              <li v-for="(imgList,index2) in list" :key="index2">
              <img class="top-img" :src="imgList.picture" :alt="imgList.title" />
              <p>{{imgList.name}}</p>
            </li>
            </el-carousel-item>
          </el-carousel>
        <!-- </el-carousel> -->
  </div>
</template>

<script>
export default {
  name: 'VueProject01Homeview',

  data() {
    return {
      dataList: [
        {
          "title": "111",
          "url": "xxx",
          "img": "https://yanxuan-item.nosdn.127.net/e40eda68f017ab81e8ce070cac81847d.png"
        },
        {
          "title": "222",
          "url": "xxx",
          "img": "https://yanxuan-item.nosdn.127.net/e40eda68f017ab81e8ce070cac81847d.png"
        },
        {
          "title": "333",
          "url": "xxx",
          "img": "https://yanxuan-item.nosdn.127.net/e40eda68f017ab81e8ce070cac81847d.png"
        },
        {
          "title": "444",
          "url": "xxx",
          "img": "https://yanxuan-item.nosdn.127.net/e40eda68f017ab81e8ce070cac81847d.png"
        },
        {
          "title": "555",
          "url": "xxx",
          "img": "https://yanxuan-item.nosdn.127.net/e40eda68f017ab81e8ce070cac81847d.png"
        },
        {
          "title": "666",
          "url": "xxx",
          "img": "https://yanxuan-item.nosdn.127.net/e40eda68f017ab81e8ce070cac81847d.png"
        },
      ],
      relevantList:[]
    };
  },

  mounted() {
     this.axios.get(`https://apipc-xiaotuxian-front.itheima.net/goods/relevant?id=${this.$route.query.id}&limit=16`).then(res=>{
            if(res.data){
                this.relevantList=res.data.result
                let newDataList = []
              let current = 0
              if(this.relevantList && this.relevantList.length>0){
                for(let i=0;i<=this.relevantList.length-1;i++){
                  if(i%4 !== 0 || i === 0 ){
                    if(!newDataList[current]){
                      newDataList.push([this.relevantList[i]])
                    }else{
                      newDataList[current].push(this.relevantList[i])
                    }
                  }else{
                    current++
                    newDataList.push([this.relevantList[i]])
                  }
                }
              }
              this.relevantList = [...newDataList]
            }
        })
  },

  methods: {
    
  },
};
</script>

<style scoped lang='scss'>
.el-car-item {
    width: 100%;
    display: flex;
    .top-img{
      width: 284px;
      height: 184px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
</style>